<template>
  <button
    ref="_ref"
    class="vk-button"
    :class="{
      [`vk-button--${type}`]: type,
      [`vk-button--${size}`]: size,
      'is-plain': plain,
      'is-round': round,
      'is-circle': circle,
      'is-disabled': disabled,
    }"
    :disabled="disabled"
    :autofocus="autofocus"
    :type="navtiveType"
  >
    <span>
      <slot></slot>
    </span>
  </button>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";
export default defineComponent({
  name: "vk-Button",
});
</script>
<script setup lang="ts">
// import {buttonProps} from "@/types/buttontype";
import type {ButtonProps} from "@/types/buttontype";

// defineProps(buttonProps);

const _ref = ref<HTMLButtonElement>();

// withDefaults 默认属性
withDefaults(defineProps<ButtonProps>(), {
  navtiveType: "button",
});

defineExpose({
  ref: _ref,
});
</script>

<style lang="scss" scoped>
// .vk-button {
//   padding: 10px 15px;
//   color: white;
//   border-radius: 5px;
//   border: 1px solid transparent;
// }
// .vk-button--success {
//   background-color: #4e8e2f;
// }
</style>
